<template>
  <a-modal
    :destroy-on-close="true"
    :mask-closable="false"
    title="菜单管理编辑"
    :open="visible"
    :onCancel="onCancel"
    :width="400"
  >
    <template #footer>
      <a-button key="back" @click="() => onCancel()">取消</a-button>
      <a-button
        key="submit"
        type="primary"
        :loading="onSubmitLoading"
        @click="onFinish"
        >提交</a-button
      >
    </template>
    <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="菜单编码" v-bind="validateInfos.code">
        <a-input v-model:value="modelRef.code" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="菜单名称" v-bind="validateInfos.name">
        <a-input v-model:value="modelRef.name" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="英文名称" v-bind="validateInfos.nameEn">
        <a-input v-model:value="modelRef.nameEn" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="父级菜单名称">
        <a-tree-select
          v-model:value="modelRef.pid"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          :fieldNames="{
            children: 'children',
            label: 'name',
            key: 'id',
            value: 'id',
          }"
          :tree-data="treeData"
          tree-node-filter-prop="label"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="类型" v-bind="validateInfos.type">
        <a-select
          placeholder="请选择"
          v-model:value="modelRef.type"
          :options="typeList"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="地址">
        <a-input v-model:value="modelRef.path" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="状态">
        <a-switch
          v-model:checked="modelRef.enableStatus"
          checked-children="ON"
          un-checked-children="OFF"
        />
      </a-form-item>
      <a-form-item label="排序">
        <a-input
          v-model:value="modelRef.sortNum"
          type="number"
          placeholder="请输入"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
import { defineComponent, PropType, reactive, Ref, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { message, Form } from "ant-design-vue";
import { validateInfos } from "ant-design-vue/lib/form/useForm";
const useForm = Form.useForm;
import { TableListItem } from "../data.d";
import { queryTreeList, queryTypeList } from "../service";

interface UpdateFormSetupData {
  modelRef: TableListItem;
  validateInfos: validateInfos;
  onFinish: () => Promise<void>;
  treeData: Ref<any[]>;
  typeList: Ref<any[]>;
}
export default defineComponent({
  name: "CreateForm",
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    values: {
      type: Object as PropType<Partial<TableListItem>>,
      required: true,
    },
    onCancel: {
      type: Function,
      required: true,
    },
    onSubmitLoading: {
      type: Boolean,
      required: true,
    },
    onSubmit: {
      type: Function as PropType<(values: TableListItem) => void>,
      required: true,
    },
  },
  setup(props): UpdateFormSetupData {
    const { t } = useI18n();
    // 表单值
    let modelRef = reactive<TableListItem>({
      id: props.values.id || "",
      code: props.values.code || "",
      name: props.values.name || "",
      nameEn: props.values.nameEn || "",
      pid: props.values.pid || "",
      type: props.values.type || "",
      path: props.values.path || "",
      sortNum: props.values.sortNum || 0,
      enableStatus: props.values.enableStatus === "1" ? true : false,
      appId: props.values.appId || 0,
    });
    // 表单验证
    const rulesRef = reactive({
      code: [
        {
          required: true,
          message: "编码不能为空",
        },
      ],
      name: [
        {
          required: true,
          message: "名称不能为空",
        },
      ],
      url: [
        {
          required: true,
          message: "url不能为空",
        },
      ],
      nameEn: [
        {
          required: true,
          message: "英文名称不能为空",
        },
      ],
      type: [
        {
          required: true,
          message: "类型不能为空",
        },
      ],
    });
    const treeData = ref([]);
    // 获取树
    const getTreeList = async () => {
      const params = {
        appId: props.values.appId,
        showAsTreeFlag: true,
        showLeafNodeFlag: false,
      };
      const res = await queryTreeList(params);
      if (res.success) {
        treeData.value = res.data;
      }
    };
    const typeList = ref([{}]);
    // 获取类型
    const getTypeList = async () => {
      typeList.value = [];
      const params = {
        pid: modelRef.pid,
      };
      const res = await queryTypeList(params);
      if (res.success) {
        res.data.forEach((ele) => {
          const obj = {
            label: ele,
            value: ele,
          };
          typeList.value.push(obj);
        });
      }
    };
    // 获取表单内容
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    // 提交
    const onFinish = async () => {
      try {
        const fieldsValue = await validate<Omit<TableListItem, "id">>();
        modelRef.enableStatus = modelRef.enableStatus ? "1" : "0";
        props.onSubmit(modelRef);
      } catch (error) {
        message.warning(t("app.global.form.validatefields.catch"));
      }
    };
    watch(
      () => props.visible,
      (newVal) => {
        if (newVal) {
          getTreeList();
          getTypeList();
        }
      },
      { deep: true, immediate: true }
    );
    watch(
      () => modelRef.pid,
      (newVal) => {
        if (newVal) {
          getTypeList();
        }
      },
      { deep: true, immediate: true }
    );
    return {
      modelRef,
      validateInfos,
      onFinish,
      treeData,
      typeList,
    };
  },
});
</script>
